<template>
    <view class="warranty_page">
        <view class="all_warranty">
            <view v-for="(i, idx) in warrantyList" :key="idx" class="warranty">
                <view class="warranty_date">
                    <view>
                        <view class="title">
                            <text>电子保修卡</text>
                            <image
                                :src="eplainIcon"
                                mode=""
                                class="explain_icon"
                                @click="showPolicyFun"
                            ></image>
                        </view>
                        <text :class="['item', 'date', { out_date: i.warrantyStatus === 1 }]"
                            >{{ i.warrantyStatus === 1 ? '已过期' : '保修中' }}｜保修期至{{
                                i.warrantyEndTime
                            }}</text
                        >
                    </view>
                    <image :src="learningCard" mode="" class="learning_card"></image>
                </view>
                <view class="serial">序列号：{{ i.simSerialNumber }} </view>
            </view>
        </view>
        <view class="service">
            <view class="service_title"> 快捷服务 </view>
            <view class="service_list">
                <view class="item" @click="applyServiceFun">
                    <image :src="applyServiceIcon" mode="" class="service_icon"></image>
                    <view>申请售后</view>
                </view>
                <view class="item" @click="lookServiceHistory">
                    <image :src="serviceHistoryIcon" mode="" class="service_icon"></image>
                    <view>售后历史</view>
                </view>
            </view>
        </view>
        <PolicyPopup v-model="showPopup" />
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getWarrantyCardMsgApi } from '@/api';
import PolicyPopup from './policyPopup.vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const CardBg = `url(${OSS_URL}/warranty_bg.png)`;
const eplainIcon = `${OSS_URL}/warranty_explain.png`;
const learningCard = `${OSS_URL}/learning_card.png`;
const applyServiceIcon = `${OSS_URL}/apply_service_icon.png`;
const serviceHistoryIcon = `${OSS_URL}/service_history_icon.png`;
const showPopup = ref(false);
const warrantyList = ref([]); // 电子报修卡列
// 保修政策
function showPolicyFun() {
    showPopup.value = true;
}
function applyServiceFun() {
    uni.navigateTo({
        url: `/pages/mine/warranty/applyService?simList=${JSON.stringify(warrantyList.value)}`,
    });
}
function lookServiceHistory() {
    uni.navigateTo({
        url: '/pages/mine/warranty/serviceHistory',
    });
}
function getWarrantyList() {
    uni.showLoading({
        title: '加载中...',
    });
    getWarrantyCardMsgApi()
        .then(res => {
            warrantyList.value = res.data;
            uni.hideLoading();
        })
        .catch(err => {
            console.log(err);
            uni.hideLoading();
        });
}
onMounted(() => {
    getWarrantyList();
});
</script>

<style lang="scss" scoped>
.warranty_page {
    padding: 40rpx 30rpx 0;
    box-sizing: border-box;
    color: #333;

    .all_warranty {
        border-bottom: 2rpx solid #eeeeee;

        .warranty {
            width: 690rpx;
            height: 279rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            background-image: v-bind(CardBg);
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .explain_icon {
                padding-left: 8rpx;
                width: 30rpx;
                height: 30rpx;
            }

            .learning_card {
                width: 242rpx;
                height: 156rpx;
            }

            .warranty_date {
                display: flex;
                justify-content: space-between;

                .title {
                    display: flex;
                    align-items: center;
                    margin: 0 0 20rpx 0;
                    font-size: 32rpx;
                    font-weight: 500;
                }

                .date {
                    font-size: 26rpx;
                    color: #615dff;
                }

                .out_date {
                    color: #a9aab5;
                }
            }

            .serial {
                margin-top: 24rpx;
                font-size: 28rpx;
                white-space: nowrap;
            }
        }
    }

    .service {
        padding: 30rpx;
        margin-top: 40rpx;

        &_title {
            margin-bottom: 40rpx;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 45rpx;
        }

        &_list {
            display: flex;

            .service_icon {
                width: 80rpx;
                height: 80rpx;
            }

            .item {
                margin-right: 40rpx;
                font-size: 28rpx;
                text-align: center;
            }
        }
    }
}
</style>
